<template>
  <div class="mainCon">
    <topTitle
      :titleText="titleText"
      :titleExplain="titleExplain"
      class="topConStyle"
    ></topTitle>
    <div class="mainConHeader">
      <div class="mainConHeaderContent"></div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="commonTab"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.id"
          v-for="item in list"
          :key="item.id"
        ></el-tab-pane>
      </el-tabs>
      <component v-bind:is="currentTabComponent"></component>
    </div>
  </div>
</template>

<script>
import gridAllocation from './gridAllocation'
import gridManagerList from './gridManagerList'

export default {
  name: 'networkGridTab',
  components: {
    gridAllocation,
    gridManagerList,
  },
  data() {
    return {
      titleText: '网格管理',
      titleExplain:
        '使用网络管理功能时，须先添加网络网格信息:可分配的项目仅限当前已开工的项目',
      activeName: '1',
      list: [
        {
          id: '1',
          label: '网格分配情况',
        },
        {
          id: '2',
          label: '网格管理',
        },
      ],
      currentTabComponent: 'gridAllocation',
    }
  },
  created() {
    if (this.isYcUser() || this.isYiLingUser()) {
      this.titleText = '项目监管'
      this.titleExplain =
        '使用项目监管功能时，须先添加乡镇及监察员信息:可分配的项目仅限当前已开工的项目'
      this.list[0].label = '项目监管分配情况'
      this.list[1].label = '项目监管'
    }
  },
  methods: {
    //tabs栏切换
    handleClick(tab, event) {
      if (this.activeName == 1) {
        this.currentTabComponent = gridAllocation
      } else if (this.activeName == 2) {
        this.currentTabComponent = gridManagerList
      }
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 132px;
  padding: 0;
  &Header {
    position: relative;
    &Content {
      position: absolute;
      left: 130px;
      z-index: 100;
      font-size: 12px;
      color: #666666;
    }
  }
  .topConStyle {
    margin: 0 !important;
    /deep/ .topTitle {
      padding: 14px 24px 16px !important;
    }
  }
}
</style>
